<template>
    <div id="main">
            <h2>相似单曲</h2>
            <div id="line"></div>
                <div id="abox" v-for="item in arr">
                     <img id="coverimg" :src="item.album.picUrl" alt="">
                    <div id="leftbox">
                        <div>{{item.album.name}}</div>
                        <div id="name">{{item.artists[0].name}}</div>
                        <div id="inline"></div>
                    </div>
                     
                </div>
        </div>

  
</template>

<script>
import axios from 'axios'
export default {
    name:'songrec',
    data(){
        return{
            asongid:'',
            arr:'',
        }
    },
    mounted:function(){
        this.load();
    },
    methods:{
        load(){
            let that = this;
            that.asongid=that.$route.query.keyword;
             axios.get("http://39.101.203.189:3000/simi/song?id="+that.asongid).then(function(response) {
                        //  console.log(response.data.songs[2].artists[0].name)
                         that.arr=response.data.songs;
                    }, function(err) {})
        }
    },

}
</script>

<style scoped>
#main{
        position: relative;
        top:-550px;
        left: 980px;
        width: 260px;
        height: 600px;
        color: aliceblue;
        overflow-y: scroll;
        overflow-x:scroll ;
        /* background-color: aqua; */
    }
    #line{
        position: relative;
        top:-45px;
        left: 110px;
        width: 120px;
        height: 3px;
        background-color: rgb(68, 5, 5);
        display: inline-block;

    }
::-webkit-scrollbar {
  width: 8px; 
 
}
::-webkit-scrollbar-thumb {
  background-color:#2c2324;
  border-radius: 5px;
  height:30px;
}
    #abox{
        margin-bottom: 20px;
    }
    #coverimg{
        width: 80px;
        height: 80px;
         margin-right: 15px;
    }
    #leftbox{
        position: absolute;
        color: aliceblue;
        display: inline-block;
        vertical-align:top;
    }
    #name{
        position: relative;
        top:20px;
        opacity: 0.7;
    }
    #inline{
        position: absolute;
        top:87px;
        left:-200px;
        width: 360px;
        height: 1px;
        background-color: beige;
        opacity: 0.6;
    }

</style>